<template>
  <div>
    <div id="map"></div>
    <!-- <el-button @click="login">登录</el-button>
    <el-button @click="handlePort">获取可用通道</el-button>
    <el-button @click="see">预览</el-button> -->
  </div>
</template>

<script setup lang="ts">
// import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

import { fromLonLat } from "ol/proj";
import { onMounted } from "vue";

const init = () => {
  console.log("[[[[]]]]");

  // 创建地图视图，设置中心点和缩放级别

  const gaode = new TileLayer({
    // title: "高德地图",
    source: new XYZ({
      url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      wrapX: false,
    }),
  });

  // 4.初始化openlayer地图
  const map = new Map({
    // 将初始化的地图设置到id为map的DOM元素上
    target: "map",
    // 设置图层
    layers: [gaode],
    view: new View({
      center: [114.3, 30.5],
      // 设置地图放大级别
      zoom: 14,
      projection: "EPSG:4326",
    }),
  });
};

onMounted(() => {
  console.log("llllllllll");
  init();
});
</script>

<style></style>
